<template>
  <el-container class="main">
    <swiper
        @swiper="onSwiper"
        :spaceBetween="30"
        :effect="'slide'"
        :modules="modules" class="mySwiper">
      <swiper-slide v-for="media in mediaList">
        <video-player
            style="width: 100%; height: 100%;"
            v-if="media.mediaType === '.mp4'"
            @pause="pauseFun"
            @play="playFun"
            @ended="endedFun"
            id="myVideo"
            ref="myVideos"
            @timeupdate="timeupdateFun"
            @loadedmetadata="loadedmetadataFun"
            :src=media.mediaUrl
            :poster=media.posterUrl
            :options="playerOptions"
            :volume="0.6"
            :currentTime="currentTime"
        />
        <el-image v-else ref="myVideos" :src=media.mediaUrl
                  style="width: 100%; height: 100%;"/>
      </swiper-slide>
    </swiper>
  </el-container>
</template>
<script setup lang="ts">
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/mousewheel";
// import "swiper/css/bundle";
import "swiper/css/free-mode";
import "swiper/css/scrollbar";
import {EffectFade, Navigation, Autoplay, Pagination} from "swiper";

import {Swiper, SwiperSlide} from 'swiper/vue';

import {onMounted, ref} from "vue";
import {allocatedOssList} from "@/api/api";
import {useRouter} from "vue-router";

const {currentRoute} = useRouter();
const route = currentRoute.value;
const modules = [EffectFade, Navigation, Autoplay, Pagination]
let swiperCopy: any = ref();
const onSwiper = ((swiper: any) => {
  swiperCopy = swiper;
})
// import {convertToSeconds} from "../../utils/video";

let currentVideoIndex = 0;
const mediaList = ref<any[]>([]);

let playerOptions = ref({
  // height: 200,
  // width: document.documentElement.clientWidth, //播放器宽度
  // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  // autoplay: true, // 如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  // fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  // controlBar: {
  //   timeDivider: true,
  //   durationDisplay: true,
  //   playToggle: true,
  //   currentTimeDisplay: true,
  //   // 剩余时间
  //   remainingTimeDisplay: true,
  //   // 进度条
  //   progressControl: false,
  //   fullscreenToggle: true // 全屏按钮
  // }
})
let currentTime = ref(10)
const myVideos = ref<any>([]);


/**
 * 播放时长改变触发
 * @param e
 */
function timeupdateFun(e: any) {

};

/**
 * 视频暂停触发
 */
function pauseFun(e: any) {
  var paragraphs = e.target.getElementsByClassName("vjs-current-time-display");
  // let seconds = convertToSeconds(paragraphs[0].textContent)
  // console.log(seconds)
}

/**
 * 开始播放触发
 */
function playFun(e: any) {
  console.log('开始播放触发' + e)

}

/**
 * 结束播放触发
 * @param e
 */
function endedFun(e: any) {
  const paragraphs = e.target.getElementsByClassName("vjs-current-time-display");
  // let seconds = convertToSeconds(paragraphs[0].textContent)
  // console.log("结束播放触发", e, seconds);
  playNextVideoOrImg();
}

function loadedmetadataFun(e: any) {
  console.log("加载完成", e);
}

onMounted(async () => {
  let data: any = await allocatedOssList({registeredCode: route.query.clientId});
  console.log(data.data.rows);
  data.data?.rows.forEach((o: any) => {
    mediaList.value.push({
      mediaType: o.fileSuffix, // 区分视频或图片
      mediaUrl: o.url,
      posterUrl: "",
      duration: 7000,
    })
  });
  setTimeout(() => {
    playNextVideoOrImg()
  }, 7000);
});

const playNextVideoOrImg = () => {
  const videoOrImg = myVideos.value[currentVideoIndex];
  if (videoOrImg.id === "myVideo") {
    videoOrImg.$el.player.pause();
    swiperCopy.slideTo(currentVideoIndex);
    const nextVideo = myVideos.value[currentVideoIndex];
    nextVideo.$el.player.play();
  } else {
    let media = mediaList.value[currentVideoIndex];
    swiperCopy.slideTo(currentVideoIndex);
    setTimeout(() => {
      playNextVideoOrImg();
    }, media.duration);
  }
  currentVideoIndex = (currentVideoIndex + 1) % mediaList.value.length;
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mySwiper {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>